<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vueDemo1</title>

    <script src="../vue/vue.js"></script>
    <link rel="stylesheet" href="style1.css">

</head>
<body>

<div id="demo1">

    <p>{{message}}</p>
    <p>{{name}}</p>
    <p>{{reverse}}</p>
    <button type="button" v-on:click="reverseButton()">{{buttonName}}</button>

    <input type="text" v-model="message">

    <div>
        <H1>Event</H1>
        <p>My age is {{age}}</p>
        <button v-on:click="age++">加一岁</button>
        <button v-on:click="age--">减一岁</button>
        <button v-on:click="add()">加一岁1</button>
        <button v-on:click="subtract()">减一岁1</button>
        <button v-on:dblclick="add()">加一岁2</button>
        <button @dblclick="subtract()">减一岁2</button>
    </div>

    <div>

        <p>{{key}}</p>
        <input v-model="key" v-on:keyup="keyAdd()">

    </div>

    <div>

        <h1>动态 css class</h1>

        <h2>示例 1</h2>

        <div v-on:click="changeColor=!changeColor" v-bind:class="{changeColor:changeColor}">
            <span>Andy</span>
        </div>

        <h2>示例 2</h2>

    </div>


</div>


<script src="demo1.js"></script>

</body>


</html>